<template>
  <div class="index">
    <header>
      <h1>贴子列表</h1>
    </header>

    <div class="release">
      <router-link to="/new/post">
        发布新帖
      </router-link>
    </div>

    <ul>
      <li v-for="post in posts" class="item">
        <div class="title">
          <router-link :to="'/post/'+post.postId">
            <span>{{ post.title }}</span>
          </router-link>

          <span class="author">作者:{{ post.author.name }}</span>
        </div>

        <div class="content">
          <p>{{ post.content }}</p>
        </div>

        <div class="pubdate">
          <span>发布时间:{{ post.pubDate }}</span>
        </div>

      </li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  export default{
    name: 'VIndex',
    data(){
      return {
        posts: []
      }
    },
    mounted(){
      this.$nextTick(() => {
        this.loadPosts();
      })
    },
    methods: {
      loadPosts(){
        this.$$get('/post/list')
          .then((res) => {
            if (res.data.code === 1)
              this.posts = res.data.data;
            else
              alert(res.data.msg);
          })
          .catch((err) => {
            //无需处理
          })
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .index {
    width 960px
    margin auto

    .release {
      position absolute
      top 30px
      right 100px
    }

    ul {
      list-style none
      padding 30px
      li {
        width 100%
      //height 200px
        margin 10px
        border 1px solid #eee
        background-color white
        box-shadow 5px 5px 2px rgba(220, 220, 220, 0.5)
      }

      .item {
        position relative
        color #666

        .title {
          margin 20px
          font-size 1.1em

          .author {
            float right
            font-size 0.95em
          }
        }

        .content {
          p {
            margin 10px 30px 30px 30px
            font-size 0.8em
          }
        }

        .pubdate {
          position absolute
          bottom 20px
          right 20px
          font-size 0.75em
        }

      }
    }
  }
</style>
